<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Campus Second-hand Trading Platform</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Campus Second-hand Trading Platform</h1>
    
    <!-- Initial Page -->
    <div id="initialPage">
      <button id="registerButton">Register</button>
      <button id="loginButton">Login</button>
    </div>
    
    <!-- Registration Form -->
    <div id="registerForm" style="display: none;">
      <h2>Register</h2>
      <form id="register">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" required>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required>
        </div>
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" name="name" required>
        </div>
        <div class="form-group">
          <label for="contact">Contact</label>
          <input type="text" id="contact" name="contact" required>
        </div>
        <div class="form-group">
          <button type="submit">Register</button>
        </div>
      </form>
      <div id="registerMessage" class="message"></div>
    </div>
    
    <!-- Login Form -->
    <div id="loginForm" style="display: none;">
      <h2>Login</h2>
      <form id="login">
        <div class="form-group">
          <label for="loginUsername">Username</label>
          <input type="text" id="loginUsername" name="username" required>
        </div>
        <div class="form-group">
          <label for="loginPassword">Password</label>
          <input type="password" id="loginPassword" name="password" required>
        </div>
        <div class="form-group">
          <button type="submit">Login</button>
        </div>
      </form>
      <div id="loginMessage" class="message"></div>
    </div>
    
    <!-- Dashboard -->
    <div id="dashboard">
      <button id="manageItemsButton">Manage Items</button>
      <button id="cartButton">Shopping Cart</button>
      <button id="ordersButton">My Orders</button>
      <button id="topUpButton">Top-up Virtual Currency</button>
    </div>
    
    <!-- Item Management -->
    <div id="itemManagement" style="display: none;">
      <h2>Item Management</h2>
      <form id="addItem">
        <div class="form-group">
          <label for="productName">Product Name</label>
          <input type="text" id="productName" name="product_name" required>
        </div>
        <div class="form-group">
          <label for="productDescription">Description</label>
          <textarea id="productDescription" name="product_description"></textarea>
        </div>
        <div class="form-group">
          <label for="productPrice">Price</label>
          <input type="number" id="productPrice" name="product_price" step="0.01" required>
        </div>
        <div class="form-group">
          <button type="submit">Add Item</button>
        </div>
      </form>
      <div id="itemsList"></div>
    </div>
    
    <!-- Shopping Cart -->
    <div id="cart" style="display: none;">
      <h2>Shopping Cart</h2>
      <div id="cartItems"></div>
      <div id="cartSummary"></div>
      <button id="checkoutButton" style="display: none;">Checkout</button>
    </div>
    
    <!-- Orders Management -->
    <div id="orders" style="display: none;">
      <h2>My Orders</h2>
      <div id="ordersList"></div>
    </div>
    
    <!-- Order Details -->
    <div id="orderDetails" style="display: none;">
      <button id="backToOrdersButton">Back to Orders</button>
      <div id="orderInfo"></div>
      <div id="orderItems"></div>
    </div>

    <!-- Top-up Form -->
<div id="topUpForm" style="display: none;">
  <h2>Top-up Virtual Currency</h2>
  <form id="topUp">
    <div class="form-group">
      <label for="topUpAmount">Amount</label>
      <input type="number" id="topUpAmount" name="amount" step="0.01" required>
    </div>
    <div class="form-group">
      <button type="submit">Top-up</button>
    </div>
  </form>
  <div id="topUpMessage" class="message"></div>
</div>
  </div>
  

  <script src="scripts.js"></script>
</body>
</html>